<template>
  <div class="day-data">
    <div class="echart-title" style="color: white">{{para.title}}</div>
    <div id="dayData" style="width: 90%; margin: auto;" :style="{height:para.innerHeight}"></div>
  </div>
</template>
<script>
  import statService from '@/api/stat/stat'
  const echarts = require("echarts");
  let myChart;
  //初始化数据
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: 25,
      left: 0,
      right: 0,
      bottom: 5,
      show: true, // 显示边框
      borderColor: "#012f4a", // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#012f4a" // 分割线颜色
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color:  "white", // 文本颜色
        showMinLabel: true,
        showMaxLabel: true
      },
    },
    xAxis: {
      type: 'category',
      data: [],
      splitLine: {show: false},
      axisLabel: {
        color:  "white", // 文本颜色
        interval: 0,
        rotate: -60
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      offset: 10,
      nameTextStyle: {
        fontSize: 15
      }
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [],
        // barWidth: 14,
        barMaxWidth: 14,
        barGap: 10,
        smooth: true,
        label: {
          normal: {
            show: true,
            position: 'top',
            offset: [5, -2],
            textStyle: {
              color: '#F68300',
              fontSize: 13
            }
          }
        },
        itemStyle: {
          emphasis: {
            barBorderRadius: 7
          },
          normal: {
            barBorderRadius: 7,
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                {offset: 0, color: '#3977E6'},
                {offset: 1, color: '#37BBF8'}
              ]
            )
          }
        }
      }
    ]
  }
  export default {
    name: "day-data",
    props: {
      para: {}
    },
    data() {
      return {
        timer:"",
        title:"",
        dataType:"",
        reload: false,
        category: [],
        barData: [],
        option: option
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    watch: {
      reload(value) {
        if (value) {
          this.option.series[0].data = this.data;
          this.option.xAxis.data = this.category;
          this.draw();
        } else {
          return
        }
      }
    },

    methods: {
      getData() {
        this.category = [];
        this.data = [];
        this.reload = false;
     //   let param = {dataType: this.dataType}
        statService.querySystemCount(param).then(res => {
          if (res.success) {
            res.data.forEach(item => {
              this.data.push(item.count);
              this.category.push(item.systemName);
            })
            this.reload = true;
          }
        }).catch((err) => console.log(err)) // 捕获异常;
      },
      draw() {
        let div = document.getElementById('dayData')
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById('dayData'));
        }
        myChart.setOption(this.option);
        window.addEventListener("resize", () => myChart.resize(), false);
      }
    },
    destroyed() {
      window.onresize = null;
      clearTimeout(this.timer)
    }
  };
</script>

